{% extends "administrative/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .basic-tabs{
            box-shadow: 0 1.5px 0 0 #1E90FF;
            color: #1E90FF;
        }
        .basic{
            width: 8%;height: 40px;line-height: 40px;text-align: center;display: inline-block;vertical-align: top;cursor: pointer;
        }
        .input-style{
            display: inline-block;
            width: 95%;
            height: 35px;
            border: none;
            font-size: 14px;
            padding-left: 1%;
            margin-left: 1%;
        }

        .textarea-style{
            display: inline-block;
            width: 73%;
            border-radius: 7px;
            font-size: 14px;
            padding-left: 1%;
            border: #cfcfcf solid 1px;
            margin-left: 1%;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .halving_line{
            width: 80%;
            border: #cfcfcf solid 0.5px;
            margin-left: 2%;
        }
        .label_tag{
            width: 100px;
            text-align: right;
            vertical-align: top;
            font-size: 14px;
            line-height: 35px;
        }
        .add-station{
            width: 60%;height: 35px;background: #0070c1;border-color: #c5dbec;color: #ffffff;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #78C3F3;
            color: #00688B;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
        .layui-laydate-content ul{
            z-index: 1000;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="meeting_room.html" style="color: #0b0b0b;">
                <i class="iconfont icon-faqi"></i>
                <span> 会议管理</span><span> > </span><span> 会议审批</span>
            </a>
        </div>
    </div>

    <div style="width: 100%;height: 40px;padding-left: 3%;box-shadow: 0 1px 0 0 #CFCFCF;">

        <div id="create-menu" class="basic basic-tabs" onclick="Control_navigation(this.id)">
            申请详情
        </div>

        <div id="flow-status" class="basic" onclick="Control_navigation(this.id)">
            流程状态
        </div>
    </div>

    <div style="width: 100%;height: 93%;">
        <div id="menu_from" style="width: 100%;height: 100%">
            <div style="width: 75%;height: 100%;margin-top: 0.2%;color: #2C3E50;display: inline-block;vertical-align: top;background: white;">
                <div style="height: 85%;width: 100%;overflow: auto;position: relative;">
                    <div id="print_div" style="width: 100%;height: 100%;"><!--startprint-->
                    <h3 id="form_name" style="text-align: center;font-size: 20px;margin-top: 1%;">会议室申请审批单</h3>

                    <div style="width: 100%;height: 95%;display: inline-block;vertical-align: center;">
                        <div style="width: 95%;margin-left: 2.5%;margin-top: 1%;">
                            <table style="width: 100%;table-layout: fixed">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 100%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;background: #dfdfdf;border-bottom: none;">基本信息</td>
                                </tr>
                            </table>
                        </div>

                        <div style="width: 95%;margin-left: 2.5%;">
                            <table style="width: 100%;">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 14%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                        申请人
                                    </td>
                                    <td id="applicat" style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;">{{ apply_detail.proposer }}</td>

                                    <td style="width: 13%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                        申请部门
                                    </td>
                                    <td id="department" style="width: 30%;border: #cfcfcf solid 0.5px;padding-left: 1%;line-height: 35px;">{{ apply_detail.department }}</td>
                                </tr>

                                <tr style="margin-left: 1%;">
                                    <td style="width: 13%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;border-bottom: none">
                                        申请日期
                                    </td>
                                    <td style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-bottom: none">
                                        {{ apply_detail.create_time }}
                                    </td>

                                    <td style="width: 8%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;border-bottom: none">

                                    </td>
                                    <td style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-bottom: none"></td>
                                </tr>
                            </table>
                        </div>

                        <div style="width: 95%;margin-left: 2.5%;">
                            <table style="width: 100%;table-layout: fixed">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 100%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;background: #dfdfdf;border-bottom: none;">申请详情</td>
                                </tr>
                            </table>
                        </div>

                        <div style="width: 95%;margin-left: 2.5%;;">
                            <table style="width: 100%;">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 12.4%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                        使用时间
                                    </td>
                                    <td id="start_time" style="width: 27%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                        {{ apply_detail.meeting_start }}
                                    </td>
                                    <td id="end_time" style="width: 38%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                        {{ apply_detail.meeting_end }}
                                    </td>
                                </tr>
                            </table>


                            <table style="width: 100%;">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 13%;height: 35px;line-height: 35px;text-align: right;border-bottom: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-top: none;border-right: none;">
                                        会议主题
                                    </td>
                                    <td id="conference_theme" style="width: 68%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-top: none;border-left: #cfcfcf solid 0.5px;">{{ apply_detail.meeting_theme }}</td>
                                </tr>
                            </table>

                            <table style="width: 100%;">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 13%;height: 35px;line-height: 35px;text-align: right;border: #cfcfcf solid 0.5px;border-top: none;border-right: none;">
                                        会议室
                                    </td>
                                    <td style="width: 68%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-top: none;">
                                        {{ apply_detail.meeting_room }}
                                    </td>
                                </tr>
                            </table>

                            <table style="width: 100%;">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 13%;height: 35px;line-height: 35px;text-align: right;border: #cfcfcf solid 0.5px;border-top: none;border-right: none;">
                                        备注
                                    </td>
                                    <td style="width: 68%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;border-top: none;">
                                        {{ apply_detail.meeting_marks }}
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <div id="approval_opinions" style="width: 95%;margin-left: 2.5%;">
                            <table style="width: 100%;table-layout: fixed">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 100%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;background: #dfdfdf;border-bottom: none;border-top: none;">审批意见</td>
                                </tr>
                            </table>
                        </div>

                        <div id="leader_opinion" style="width: 95%;margin-left: 2.5%;">
                            <table id="zhouyuanzhnag" style="width: 100%;">
                                <tr style="margin-left: 1%;">
                                    <td style="width: 13%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;border-right: none;">
                                        党政办主任
                                    </td>
                                    <td style="width: 68%;height: 35px;line-height: 35px;padding-left: 1%;padding-right: 1%;border: #cfcfcf solid 0.5px;">
                                        <div style="width: 100%;height: 100%;">
                                            <div id="nopass_opinion" style="width: 100%;display: none;">
                                                <div style="width: 10%;display: inline-block;vertical-align: top;">{{ present.status }}</div>
                                                <div style="width: 87%;display: inline-block;vertical-align: top;">{{ present.opinion }}</div>
                                            </div>
                                            <div id="pass_opinion" style="width: 100%;text-align: center;display: none;">
                                                <div><img style="width: 200px;height: 80px;" src="{{ signature_img }}" alt=""><span style="vertical-align: bottom;margin-left: 3%;"></span></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </div>
                    <!--endprint-->
                </div>

                    <div id="approve_id" style="width: 180px;height: 180px;position: absolute;z-index: 999;top: 5%;right: 5%;">
                        <img src="../../static/announcements/imgs/{{ img_name }}" alt="" style="width: 180px;height: 180px;">
                    </div>
                </div>

                <hr>
                <iframe id="iframe1" style="display: none"></iframe>
                <div style="width: 100%;height: 80px;text-align: center;margin-top: 1%;">
                    <button onclick="but_click()" style="width: 80px;height: 30px;border: #efefef solid 0.5px;border-radius: 7px;">打印</button>
                </div>
            </div>

            <div style="width: 23%;height: 100%;display: inline-block;vertical-align: top;background: white;margin-top: 0.2%;">
                <div style="width: 100%;text-align: center;margin-top: 4%;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i class="iconfont icon-kaishi"></i>开始</button></div>
                <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
                <div style="width: 100%;text-align: center;"><button id="kong" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;color: #00FF7F;">党政办主任 (孔智慧)</button></div>
                <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
                <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">通知知会 (党政办公室)</button></div>
                <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
                <div style="width: 100%;text-align: center;"><button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i class="iconfont icon-jieshu"></i>结束</button></div>
            </div>
        </div>

        <!-- 流程状态 -->
        <div id="process_status" style="width: 100%;height: 88%;display: none;margin-top: 0.2%;">
            <div style="height: 88%;width: 100%;overflow: auto;">
                <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;">
                    <thead>
                    <tr>
                        <th scope="col" style="width: 8%;">序号</th>
                        <th scope="col" style="width: 8%;">节点</th>
                        <th scope="col" style="width: 8%;">操作状态</th>
                        <th scope="col" style="width: 8%;">意见</th>
                    </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="t_table1"></tbody>
                </table>
            </div>
        </div>

    </div>




{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("administrative").className = "add-nav-active";
            document.getElementById("meeting_management_ul").style.display = "inline-block";
            document.getElementById("jiantou2").className = "iconfont icon-jiantou-xia";
            document.getElementById("organizational_management_ul").style.display = "none";
        };

        var request_type = "{{ request_type | safe }}";
        var present = {{ present | safe }};
        if (request_type === "my_apply"){
            document.getElementById("my_meeting").className = "add_class";
            if (present["孔智慧"]["status"] === "同意"){
                document.getElementById("pass_opinion").style.display = "inline-block";
                document.getElementById("kong").style.color = "black";
            }else if (present["孔智慧"]["status"] === "不同意"){
                document.getElementById("nopass_opinion").style.display = "inline-block";
                document.getElementById("kong").style.color = "black";
            }
        }else if (request_type === "my_backlog"){
            document.getElementById("kong").style.color = "black";
            document.getElementById("my_meeting_to_do").className = "add_class";
            if (present["孔智慧"]["status"] === "同意"){
                document.getElementById("pass_opinion").style.display = "inline-block"
            }else {
                document.getElementById("nopass_opinion").style.display = "inline-block"
            }
        }else if (request_type === "my_notify"){
            document.getElementById("kong").style.color = "black";
            document.getElementById("meeting-calendar").className = "add_class";
            if (present["孔智慧"]["status"] === "同意"){
                document.getElementById("pass_opinion").style.display = "inline-block"
            }else {
                document.getElementById("nopass_opinion").style.display = "inline-block"
            }
        }

        function click_ul() {
            if (document.getElementById("jiantou").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou").className = "iconfont icon-jiantou-xia";
                document.getElementById("organizational_management_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou").className = "iconfont icon-jiantou-shang";
                document.getElementById("organizational_management_ul").style.display = "none";
            }
        }

        function click_ul1() {
            if (document.getElementById("jiantou1").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou1").className = "iconfont icon-jiantou-xia";
                document.getElementById("gebruikersrol_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou1").className = "iconfont icon-jiantou-shang";
                document.getElementById("gebruikersrol_ul").style.display = "none";
            }
        }

        function click_ul2() {
            if (document.getElementById("jiantou2").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou2").className = "iconfont icon-jiantou-xia";
                document.getElementById("meeting_management_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou2").className = "iconfont icon-jiantou-shang";
                document.getElementById("meeting_management_ul").style.display = "none";
            }
        }

        function click_ul3() {
            if (document.getElementById("jiantou3").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-xia";
                document.getElementById("issue_approval_ul").style.display = "inline-block";
            }else {
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-shang";
                document.getElementById("issue_approval_ul").style.display = "none";
            }
        }

        function summit_data() {
            var application_id = String( window.location).split("application_id=")[1];
            var nuclear_draft = $("input[type=radio][name=nuclear_draft]:checked").val();               // 审批是否同意
            var approval_opinion = document.getElementById("approval_opinion_1").value;
            var MeetingInfo_id = String( window.location).split("MeetingInfo_id=")[1].split("&")[0];
            var start_time = document.getElementById("start_time").innerText;
            var end_time = document.getElementById("end_time").innerText;
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/meeting_detail.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("regimentation=会议管理"+"&table_name=会议室申请"+"&application_id="+String(application_id)+"&nuclear_draft="+String(nuclear_draft)+"&approval_opinion="+String(approval_opinion)+"&MeetingInfo_id="+String(MeetingInfo_id)+"&start_time="+String(start_time)+"&end_time="+String(end_time));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            ert("审批成功");
                            window.location = "/administrative/meeting_backlog.html";
                        }
                    }
                }
            };
        }

        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }

        // 控制表单、流程导航
        function Control_navigation(ele_id) {
            if (ele_id === "create-menu") {
                document.getElementById(ele_id).className = "basic basic-tabs";
                document.getElementById("flow-status").className = "basic";
                document.getElementById("menu_from").style.display = "inline-block";
                document.getElementById("process_status").style.display = "none";
            }else {
                document.getElementById(ele_id).className = "basic basic-tabs";
                document.getElementById("create-menu").className = "basic";
                document.getElementById("process_status").style.display = "inline-block";
                document.getElementById("menu_from").style.display = "none";
            }
        }


        var t_table1 = document.getElementById("t_table1");
        for (var j = 0; j < Object.keys(present).length; j++) {
            var key = Object.keys(present)[j];
            var tr = document.createElement("tr");var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");
            td.innerHTML = j + 1;td.style.textAlign = "center";
            td1.innerHTML = key;td1.style.textAlign = "center";
            td2.innerHTML = present[key]["status"];td2.style.textAlign = "center";
            td3.innerHTML = JSON.stringify(present[key]["opinion"]);td3.style.paddingLeft = "1%";
            tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);
            t_table1.appendChild(tr);
        }

        function but_click() {
             bdhtml=document.getElementById("print_div").innerHTML;
             sprnstr="<!--startprint-->";   //开始打印标识字符串有17个字符
             eprnstr="<!--endprint-->";        //结束打印标识字符串
             prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
             prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//截取开始标识和结束标识之间的内容
             var iframe = null;
             iframe = document.getElementById("iframe1");

             var htmlToPrint = '' +
            '<style type="text/css">' +
                'table {'+
                    'border-collapse:collapse;' +
                '}' +
                'table td{'+
                    'border-top: 1px solid red;'+
                    'border-left: 1px solid red;'+
                    'border-bottom: 1px solid red;'+
                    'border-right: 1px solid red;'+
                    'border-collapse: separate;'+
                '}'+
            '</style>';
             htmlToPrint += prnhtml;
             var iwindow = null;
             var iwindow = iframe.contentWindow;//获取iframe的window对象
             iwindow.document.close();
             iwindow.document.write(htmlToPrint);
             iwindow.print(); //调用浏览器的打印功能打印指定区域
         }
    </script>
{% endblock %}




